Skip to main content

Flex 布局最佳实践

· 2 min read

总结 Flex 布局的最佳实践

有关 Flex 布局的所有细节详见 Notes/Web基础/CSS/flex布局。本篇只涉及 Flex 布局的最佳实践。

子项分组布局​

最常见的需求就是实现 PC 端网站顶部的 NavBar。

pic.nm

左边和右边的 item 分为了两组，这个需求使用 flex 布局很容易实现。

假如我们的 NavBar 中有 5 个子项。

image-20211224132852050

<div class="nav">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
.nav {
  height: 50px;
  padding: 0 10px;
  background: green;

  display: flex;
  gap: 0 10px;
  align-items: center;

  .item {
    width: 30px;
    height: 30px;
    border: 1px solid;
    background: skyblue;
  }
}

想要让 1, 2 子项为一组，3, 4, 5 子项目为一组，只需要将第二个子项的 margin-right 设置为 auto。

image-20211224133834392

.item {
  width: 30px;
  height: 30px;
  border: 1px solid;
  background: skyblue;
  &:nth-child(2) {
    margin-right: auto;
  }
}

同理，如果想让 3 子项目单独又分为一组，那么再把第三个子项目的 margin-right 设置为 auto。

image-20211224134100716

.item {
  width: 30px;
  height: 30px;
  border: 1px solid;
  background: skyblue;

  &:nth-child(2) {
    margin-right: auto;
  }
  &:nth-child(3) {
    margin-right: auto;
  }
}

等高布局​

具体效果如下。

pic.nm

利用 flex 布局很容易实现这个效果，因为默认情况下 align-items 取值为 stretch，在 flex 容器中的所有项目会默认占满交叉轴方向上的剩余空间。

.container {
  display: flex;
  
  .item {
    flex: 1;
    
    &:nth-child(1) {
      background: green;
    }
    &:nth-child(2) {
      background: skyblue;
    }
    &:nth-child(3) {
      background: orange;
    } 
  }
}